<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="menuGrid"></div>
<div id="menuToolbar">
	<div>
		<a href="#" class="easyui-linkbutton" onclick="menu.toolbar.showAddDialog();" data-options="
		iconCls:'icon-add',
		plain:true">
			新增
		</a>
		<a href="#" class="easyui-linkbutton" onclick="menu.toolbar.showUpdateDialog();" data-options="
		iconCls:'icon-edit',
		plain:true">
			修改
		</a>
		<a href="#" class="easyui-linkbutton" onclick="menu.init();" data-options="
		iconCls:'icon-edit',
		plain:true">
			显示启用菜单
		</a>
		<a href="#" class="easyui-linkbutton" onclick="menu.initclo();" data-options="
		iconCls:'icon-edit',
		plain:true">
			显示禁用菜单
		</a>
	</div>
</div>
<div id="menuAddDialog" class="easyui-dialog ec-dialog" data-options="
title:'新增菜单',
buttons:'#menuAddButtons',
closed: true,
onClose:menu.toolbar.resetAddFrom">
	<form id="menuAddForm" method="post">
		<p>
			<strong>父级菜单：</strong>
			<select class="easyui-combobox" name="name" style="width:153px" data-options="editable:false" >
				<option value="0">新建父级菜单</option>
			    <option value="1">系统模块</option>
			    <option value="2">题库模块</option>
			    <option value="3">考试模块</option>
			    <option value="4">辅助模块</option>
			    <option value="5">学员模块</option>
			</select>
		</p>
		<p>
			<strong>菜&nbsp;&nbsp;单&nbsp;名：</strong>
			<input type="text" name="menuName" id="menuName" class="easyui-textbox" data-options="
			required:true">
		</p>
		<p>
			<strong>链接地址：</strong>
			<input type="text" name="menuUrl" id="menuUrl" class="easyui-textbox" data-options="
			required:true">
		</p>
		<p>
			<strong>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</strong>
			<select class="easyui-combobox" name="menuState" id="menuState" style="width:73px" data-options="editable:false" >
			    <option value="1">open</option>
			    <option value="2">closed</option>
			</select>
		</p>
	</form>
</div>
<div id="menuAddButtons">
	<a href="#" onclick="menu.toolbar.add()" class="easyui-linkbutton" data-options="
	iconCls: 'icon-add',
	plain: true">
		新增
	</a>
	<a href="#" onclick="menu.toolbar.hiddenAddDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>
<div id="menuUpdateDialog" class="easyui-dialog ec-dialog" data-options="
title:'修改菜单信息',
buttons:'#menuUpdateButtons',
closed: true,
onClose:menu.toolbar.resetUpdateFrom">
	<form id="menuUpdateForm" method="post">
	<input name="id" type="hidden"/>
		<p>
			<strong>父级菜单：</strong>
			<input type="text" name="name" id="name"class="easyui-textbox"disabled="disabled">
		</p>
		<p>
			<strong>菜&nbsp;&nbsp;单&nbsp;名：</strong>
			<input type="text" name="menuName" id="menuName" class="easyui-textbox" data-options="
			required:true">
		</p>
		<p>
			<strong>链接地址：</strong>
			<input type="text" name="menuUrl" id="menuUrl" class="easyui-textbox">
		</p>
		<p>
			<strong>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</strong>
			<select class="easyui-combobox" name="menuState" id="menuState" style="width:73px" data-options="editable:false" >
			    <option value="1">open</option>
			    <option value="2">closed</option>
			</select>
		</p>
	</form>
</div>
<div id="menuUpdateButtons">
	<a href="#" onclick="menu.toolbar.update(id)" class="easyui-linkbutton" data-options="
	iconCls: 'icon-edit',
	plain: true">
		修改
	</a>
	<a href="#" onclick="menu.toolbar.hiddenUpdateDialog();" class="easyui-linkbutton" data-options="
	iconCls: 'icon-redo',
	plain: true">
		取消
	</a>
</div>
<script>
	 var menu={
			 init : function() {
				 	menu.menuGrid = $('#menuGrid');
				 	menu.menuAddDialog = $('#menuAddDialog');
				 	menu.menuAddForm = $('#menuAddForm');
				 	menu.menuUpdateForm = $('#menuUpdateForm');
				 	menu.menuUpdateDialog = $('#menuUpdateDialog');
					
				 	menu.menuGrid.datagrid({
					    url: '<%=request.getContextPath()%>/SysMenuServlet?command=listMenuop',
					    fitColumns: true,
					    striped: true,
					    rownumbers: true,
					    pagination: true,
					    pageSize: 10,
					    pageList: [10, 20, 30, 40, 50],
					    pageNumber: 1,
					    toolbar: '#menuToolbar',
					    columns:[[
							{field:'id', width:100, checkbox: true},
							{field:'text', title:'菜单名称', width:100, align:'center'},
							{field:'operate_time', title:'操作时间', width:100, align:'center'},
							{field:'state', title:'状态', width:100, align:'center'},
							{field:'url', title:'链接地址', width:100, align:'center'},
							{field:'StateOp', title:'操作', formatter: menu.row.showGender, width:100, align:'center'}
					    ]],
						onDblClickRow: function(rowIndex, rowData) {
							menu.toolbar.showUpdateDialog(rowData.id);
						},
						onBeforeLoad: function(param){
								var name= $('#name').val();
								var time= $('#time').val();
								param.name=name;
								param.time=time;
						}
					});
				},
				
				initclo : function() {
				 	menu.menuGrid = $('#menuGrid');
				 	menu.menuAddDialog = $('#menuAddDialog');
				 	menu.menuAddForm = $('#menuAddForm');
				 	menu.menuUpdateForm = $('#menuUpdateForm');
				 	menu.menuUpdateDialog = $('#menuUpdateDialog');
					
				 	menu.menuGrid.datagrid({
					    url: '<%=request.getContextPath()%>/SysMenuServlet?command=listMenuclo',
					    fitColumns: true,
					    striped: true,
					    rownumbers: true,
					    pagination: true,
					    pageSize: 10,
					    pageList: [10, 20, 30, 40, 50],
					    pageNumber: 1,
					    toolbar: '#menuToolbar',
					    columns:[[
							{field:'id', width:100, checkbox: true},
							{field:'text', title:'菜单名称', width:100, align:'center'},
							{field:'operate_time', title:'操作时间', width:100, align:'center'},
							{field:'state', title:'状态', width:100, align:'center'},
							{field:'url', title:'链接地址', width:100, align:'center'},
							{field:'StateOp', title:'操作', formatter: menu.row.showGender, width:100, align:'center'}
					    ]],
						onDblClickRow: function(rowIndex, rowData) {
							menu.toolbar.showUpdateDialog(rowData.id);
						},
						onBeforeLoad: function(param){
								var name= $('#name').val();
								var time= $('#time').val();
								param.name=name;
								param.time=time;
						}
					});
				},
				
				toolbar: {
					showAddDialog: function() {
						menu.menuAddDialog.dialog('open');
					},
					hiddenAddDialog: function() {
						$('#menuAddDialog').dialog('close');
						menu.toolbar.resetAddForm();
						menu.menuGrid.datagrid('reload');
					},
					resetAddForm: function() {
						menu.menuAddForm.form('reset');
					},
					add: function() {
						if (menu.menuAddForm.form('validate')) {
							$.messager.progress({
								text : '正在处理...'
							});
						
						$.post('<%=request.getContextPath()%>/SysMenuServlet?command=addMenu',$("#menuAddForm").serialize(), function(data) {
							if (data) {
								$.messager.show({
									title: '系统提示',
									msg: '新增成功！',
									timeout: 3000,
									showType: 'slide'
								});
								
							} else {
								$.messager.alert('系统提示', '新增失败！', 'error')
							}
							$.messager.progress('close');
							menu.toolbar.hiddenAddDialog();
						});
					}
				},
					
					//显示修改界面
					showUpdateDialog: function(id) {
						var getData = function(v) {
							
							$.post('<%=request.getContextPath()%>/SysMenuServlet?command=getMenu', {id : v}, function(data) {
								console.info(data);
								if (data) {
									menu.menuUpdateForm.form('load', {
										id:data.id,
										name:data.menutext,
										menuName:data.text,
										menuUrl:data.url,
										menuState:data.state,
									});
									$('#menuUpdateDialog').dialog('open');
								} else {
									$.messager.alert('系统提示', '获取信息失败！', 'error')
								}
								$.messager.progress('close');
							}, 'json');
						}
						if (id) {
							getData(id);
						} else {
							var row = menu.menuGrid.datagrid('getSelections');
							if (row.length == 1) {
								getData(row[0].id);
							} else {
								$.messager.show({
									title: '系统提示',
									msg: '请选择一行数据进行修改！',
									timeout: 3000,
									showType: 'slide'
								});	
							}
						}
					},
					
					hiddenUpdateDialog: function() {
						$('#menuUpdateDialog').dialog('close');
						menu.menuGrid.datagrid('reload');
					},
					resetUpdateFrom: function() {
						menu.menuUpdateForm.form('reset');
					},
					
					update: function() {
						if (menu.menuUpdateForm.form('validate')) {
							$.messager.progress({
								text : '正在处理...'
							});
							$.post('<%=request.getContextPath()%>/SysMenuServlet?command=updateMenu', $("#menuUpdateForm").serialize(), function(data) {
								if (data == 1) {
									$.messager.show({
										title: '系统提示',
										msg: '修改成功！',
										timeout: 3000,
										showType: 'slide'
									});
									menu.toolbar.resetUpdateFrom();
									menu.menuGrid.datagrid('reload');
								} else {
									$.messager.alert('系统提示', '修改失败！', 'error');
								}
								$.messager.progress('close');
								menu.toolbar.hiddenUpdateDialog();
							});
							
							
						}
					},
					redo: function() {
						menu.menuGrid.datagrid('unselectAll');
					},
				},
				row : {
					showGender: function(value, row) {
						var id = row.id;
						var state = row.state;
						if (!value) {
						 value = state == 'open' ? 'closed' : 'open';
						}
						var operations = [];
						operations.push('<a href="javascript:void(0)" onclick="menu.row.updateGender(\'' + id + '\',  \'' + value + '\')">' + value + '</a>');
						return operations.join('');
					},
					updateGender: function(id, value) {
						$.messager.confirm('Confirm', '你确定要更改状态吗?', function(result){
							if (result){
								
								 $.ajax({   
						                url: '<%=request.getContextPath()%>/SysMenuServlet?command=updateState' + "&id=" + id + "&value=" + value,//传参数到一般处理方法，并赋值  
						                 
						            type:"Post",  
						                dataType:"json",  
						                success: function (data) {//ajax请求完成时执行，data为返回的结果  
						                	$.messager.show({
												title: '系统提示',
												msg: '状态修改成功！',
												timeout: 3000,
												showType: 'slide'
											});
						                	menu.menuGrid.datagrid('reload');
						                }  
						            });  
								
								
							} else {
								$.messager.alert('系统提示', '状态修改失败！', 'error')
							}
						});
					}
				} 
			};
	 
			
			$(function(){
				menu.init();
			});
			
</script>